<template>
  <div ref="chartArea" class="chart-area"></div>
</template>

<script>
export default {
  data() {
    return {
      myChart: null,
      chartData: [],
      linkData: [],
    };
  },
  props: {
    data: {
      type: Object,
      default: () => {},
    },
  },
  mounted() {
    setTimeout(() => {
      this.myChart = this.$echarts.init(this.$refs.chartArea);
    }, 1000);
    window.onresize = () => {
      this.myChart.resize();
    };
  },
  watch: {
    data(newValue, oldValue) {
      if (newValue) {
        this.chartData.push({
          name: newValue.companyName,
          x: 100,
          y: 200,
        });
        this.chartData.push({
          name: newValue.legal,
          x: 50,
          y: 150,
        });
        this.linkData.push({
          source: newValue.companyName,
          target: newValue.legal,
          label: {
            show: true,
            fontSize: 10,
            formatter: "企业法人",
          },
        });
        const relations = newValue.relations;
        relations.forEach((element) => {
          this.chartData.push({
            name: element.companyToName,
            x: 100,
            y: 150,
          });
          this.linkData.push({
            source: newValue.companyName,
            target: element.companyToName,
            label: {
              show: true,
              fontSize: 10,
              formatter: this.getTitle(element.type),
            },
          });
        });
        setTimeout(() => {
          this.drawChart();
        }, 1000);
      }
    },
  },
  methods: {
    drawChart() {
      let option = {
        tooltip: {
          show: false,
        },
        animationDurationUpdate: 1500,
        animationEasingUpdate: "quinticInOut",
        series: [
          {
            type: "graph",
            layout: "force",
            force: {
              repulsion: 20,
              edgeLength: 40,
            },
            symbolSize: 50,
            roam: true,
            label: {
              show: true,
            },
            symbol: "rect",
            symbolSize: [200, 30],
            edgeSymbol: ["circle", "arrow"],
            edgeSymbolSize: [4, 10],
            edgeLabel: {
              fontSize: 20,
            },
            itemStyle: {
              color: "#188af1",
            },
            data: this.chartData,
            links: this.linkData,
            lineStyle: {
              opacity: 0.9,
              width: 2,
              curveness: 0,
            },
          },
        ],
      };
      this.myChart.setOption(option);
    },
    getTitle(value) {
      let options = [
        {
          value: 0,
          label: "相同法人",
        },
        {
          value: 1,
          label: "合作伙伴",
        },
        {
          value: 2,
          label: "关联公司",
        },
        {
          value: 3,
          label: "供应商",
        },
        {
          value: 4,
          label: "竞争对手",
        },
        {
          value: 5,
          label: "最终客户",
        },
      ];
      let res = options.find((item) => item.value == value);
      return res.label ? res.label : "";
    },
  },
};
</script>

<style lang="less" scoped>
.chart-area {
  background-color: #fff;
  width: 100%;
  border-radius: 4px;
  padding: 19px 24px;
  height: 100%;
}
</style>
